<script setup>
import {reactive, ref} from "vue";
import kChart from '../result/kChart/kChart.vue'
import barChart from '../result/barChart/barChart.vue'
import lineChart from '../result/lineChart/lineChart.vue'
import columFoldLine from '../result/columFoldLine/columFoldLine.vue'
import bs_scroll from './bs_scroll.vue'
import scrollTable from '../../components/scrollTable.vue'

const kchart = reactive({
  id: 'kchart1',
  categories: ['2021Q1', '2021Q2', '2021Q3', '2021Q4', '2022Q1',],
  series: [
    {
      name: '资产负债率',
      type: 'spline',
      data: [12, 34, 44, 55, 23,]
    },
    {
      name: '行业均值',
      type: 'spline',
      data: [23, 25, 33, 56, 35]
    }
  ]
})

const lct1 = reactive({
  id: 'lct1',
  categories: ['2021Q1', '2021Q2', '2021Q3', '2021Q4', '2022Q1',],
  series: [
    {
      name: '资产负债率',
      type: 'spline',
      data: [12, 34, 44, 55, 23,]
    },
    {
      name: '行业均值',
      type: 'spline',
      data: [23, 25, 33, 56, 35]
    }
  ]
})

const bct1 = reactive({
  id: 'bct1',
  categories: ['6/30', '7/1', '7/2', '7/3', '7/4',],
  series: [
    {
      name: '融资余额',
      data: [2.9, 3.5, 1.4, 3.2, 3,]
    },
  ]
})


const bct2 = reactive({
  id: 'bct2',
  categories: ['2016', '2017', '2018', '2019', '2020',],
  series: [
    {
      name: '净利润',
      data: [2.9, 3.5, 1.4, 3.2, 3,]
    },
    {
      name: '扣非后净利润',
      data: [1.6, 2.8, 1.5, 3.4, 3.6]
    },
    {
      name: '营业收入',
      data: [2.4, 3.2, 3.5, 1.7, 2.6,]
    }
  ]
})

const cfl1 = reactive({
  id: 'cfl1',
  categories: ['2016', '2017', '2018', '2019', '2020'],
  series: [
    {
      name: '主力净流出',
      type: 'column',
      yAxis: 1,
      data: [49.9, 71.5, 106.4, 129.2, 144.0,],
    },
    {
      name: '占比',
      type: 'spline',
      data: [7.0, 3.3, 9.5, 14.5, 18.2,],
      tooltip: {
        valueSuffix: ''
      }
    }
  ]
})


const tableRte = reactive({
  titleList: [
    {title: "日期", type: "date", width: ''},
    {title: "姓名", type: "name", width: ''},
    {title: "地址", type: "address", width: ''},
    // {title: "地址1", type: "address", width: ''},
    // {title: "日期", type: "date", width: 120},
    // {title: "姓名", type: "name", width: 100},
    // {title: "地址", type: "address", width: 200},
    // {title: "地址2", type: "address", width: 200},
  ],
  dataList: [
    {
      date: "2016-05-03",
      name: "张三",
      address: "上海市普陀区金沙江路 1516 弄"
    },
    {
      date: "2016-05-04",
      name: "李四",
      address: "上海市普陀区金沙江路 1517 弄"
    },
    {
      date: "2016-05-05",
      name: "王五",
      address: "上海市普陀区金沙江路 1518 弄"
    },
    {
      date: "2016-05-06",
      name: "小六",
      address: "上海市普陀区金沙江路 1520 弄"
    },
  ]
})


</script>
<template>
  <div class="app-container">

    <!--  <van-cell title="水平滚动" />-->
    <!--  <bs_scroll/>-->
    <van-cell title="水平滚动-表格"/>
    <scrollTable :titleList="tableRte.titleList" :dataList="tableRte.dataList"/>
    <van-cell title="股票"/>
    <kChart :id="kchart.id" :categories="kchart.categories" :series="kchart.series"/>
    <van-cell title="折线图"/>
    <lineChart :id="lct1.id" :categories="lct1.categories" :series="lct1.series"/>
    <van-cell title="柱状图"/>
    <barChart :id="bct1.id" :categories="bct1.categories" :series="bct1.series"/>
    <van-cell title="柱状图2"/>
    <barChart :id="bct2.id" :categories="bct2.categories" :series="bct2.series"/>
    <van-cell title="折线图和柱状图混合"/>
    <columFoldLine :id="cfl1.id" :categories="cfl1.categories" :series="cfl1.series"/>
  </div>

</template>

<style scoped lang="scss">
.app-container{
  padding:0 16px;
}
</style>